<template>
    <div class="portlet light bordered">
        <div class="portlet-title tabbable-line">
            <div class="caption">
                <i class=" icon-social-twitter font-dark hide"></i>
                <span class="caption-subject font-dark bold uppercase">订单快速审核</span>
            </div>
        </div>
        <div class="portlet-body" style="height: 425px;">
            <!-- BEGIN: Actions -->
            <div class="mt-actions">
                <div class="mt-action" v-for="payment in payments">
                    <a :href="cfg.aphf_img_baseurl + payment.PayReceipt" target="view_window">
                        <div class="mt-action-img">
                            <img :src="cfg.aphf_img_baseurl + payment.PayReceipt" style="width:45px;height:45px;">
                        </div>
                    </a>
                    <div class="mt-action-body">
                        <div class="mt-action-row">
                            <div class="mt-action-info ">
                                <div class="mt-action-icon">
                                    <i v-if="payment.PayMethod=='BANK'||payment.PayMethod=='BANK2'" class="icon iconfont icon-shenghuozhuanzhang" style="color:orange"></i>
                                    <i v-if="payment.PayMethod=='ALIPAY'" class="icon iconfont icon-zhifubao" style="color:rgb(0, 159, 233)"></i>
                                    <i v-if="payment.PayMethod=='WEIXIN'" class="icon iconfont icon-weixinzhifu" style="color:rgb(80, 182, 116)"></i>
                                    <i v-if="payment.PayMethod=='PAYPAL'" class="icon iconfont icon-paypal" style="color:blue"></i>
                                </div>
                                <div class="mt-action-details ">
                                    <span class="mt-action-author">
                                        <user-detail :user="payment.Account.User"></user-detail> 
                                        支付金额：{{payment.TotalPrice}}.00 元
                                    </span>
                                    <p class="mt-action-desc">{{payment.PayNo}}</p>
                                </div>
                            </div>
                            <div class="mt-action-datetime ">
                                <span class="mt-action-date">{{payment.CreateTime|time}}</span>
                            </div>
                            <div class="mt-action-buttons" v-if="payment.State == 0">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm green btn-circle btn-outline" @click="audit(payment)">审核通过</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Actions -->
        </div>
    </div>
</template>

<script>

import 'assets/fonts/iconfont.css';
import {TimeFormat, DeepClone, ShowSuccess} from 'web/utils.js';
import UserDetail from 'views/user/user_detail.vue';

export default {
    data() {
        return {
            payments: []
        }
    },
    components: {
        UserDetail
    },
    filters: {
        time: TimeFormat
    },
    mounted() {
        // 初始化支付列表
        this.query();

    },
    methods: {
        // 条件查询
        query() {
            let condition = {
                States: [0]
            };
            this.$PaymentService.QueryPayments(condition, 1, 6)
                .then(ret => {
                    this.payments = ret;
                })
        },

        // 审核订单
        audit(payment) {
            let __payment = DeepClone(payment);
            __payment.State = 1;

            this.$PaymentService.Audit(__payment)
                .then(ret => {
                    if(ret) {
                        // 加载新的5条记录
                        this.query();
                        ShowSuccess(`支付单${payment.PayNo}已经审核通过`,'支付单审核');
                    }
                });
        }
    }
}
</script>

<style>

</style>
